
<html>
<head>
    <meta charset="UTF-8">
    <title>HiVue</title>
    <link rel="stylesheet" href="styles/demo.css">
</head>
<body>
<h2>Hello World!</h2>
<div id="app">
    <p>
        {{message}}
    </p>

    <h1 v-if="yes">章雪玲</h1>
    <h1 v-if="lrs">柳如是</h1>
    <h1 v-if="gyy">高圆圆</h1>
    <h1 v-if="price>=688">Price:{{price}}</h1>
    <h1 v-else>Alert:{{alert}}</h1>
    <h1 v-show="age>=18">Age:{{age}}</h1>
    <h1 v-if="name.indexOf('林')>=0">Name:{{name}}</h1>
    <h1 v-else>{{msg}}</h1>
    <input type="text" v-model="message">

    <table>
        <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="person in people">
            <td>{{ person.name  }}</td>
            <td>{{ person.age  }}</td>
            <td>{{ person.sex  }}</td>
        </tr>
        </tbody>
    </table>
<p> <button v-on:click="greet">Greet</button></p>
<p> <button v-on:click="say('hi')">Hi</button></p>
<p> <button @click="love">Love</button></p>
    <ul class="pagination">
        <li v-for="n in pageCount">
            <a href="javascript:void(0)" v-bind:class="activeNumber===n ? 'active':''">{{n}}</a>
        </li>
    </ul>
</div>
</body>
<script src="js/vue.js">

</script>

<script>
    var mydata={
        message:"Hello 章雪玲！",
        yes:true,
        lrs:true,
        gyy:false,
        price:6888,
        alert:"钱太少",
        age:38,
        name:"林志玲",
        msg:"林志玲来大姨妈了，来尝尝高圆圆吧！",
        activeNumber:1,
        pageCount:10,
        people:[
            {name:"柳如是",age:23,sex:"女神"},
            {name:"苏小小",age:19,sex:"女神"},
            {name:"徐睿",age:38,sex:"性奴"},
        ]
    }

    new Vue({
        el:"#app",
        data:mydata,
        methods:{
            greet:function () {
                alert(this.message)
            },
            say:function (msg) {
                alert(msg)
            },
            love:function () {
                alert("Make love with "+this.name)
            }
        }
    })
</script>
</html>
